import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function Square( props ) {
	return (
		<button className="square" onClick={props.click}>
			{props.value}
		</button>
	);
}

class Board extends React.Component {
	constructor() {
		super();
		this.state = {
			squares: Array( 9 ).fill( null ),
			xIsNext: true
		};
	}

	handleClick( i ) {
		const squares = this.state.squares.slice();

		if ( calculateWinner( squares ) || squares[ i ] ) {
			return;
		}

		squares[ i ] = this.state.xIsNext ? 'X' : 'O';
		this.setState( { squares: squares, xIsNext: !this.state.xIsNext } );
	}

	renderSquare( i ) {
		return (
			<Square value={this.state.squares[ i ]} click={()=>this.handleClick( i )}/>
		);
	}

	render() {
		const winner = calculateWinner( this.state.squares );
		let status;

		if ( winner ) {
			status = 'winner: ' + winner;
		} else {
			status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
		}

		return (
			<div>
				<div className="status">{status}</div>

				<div className="board-row">
					{this.renderSquare( 0 )}
					{this.renderSquare( 1 )}
					{this.renderSquare( 2 )}
					{this.renderSquare( 3 )}
					{this.renderSquare( 4 )}
					{this.renderSquare( 5 )}
				</div>
				<div className="board-row">
					{this.renderSquare( 6 )}
					{this.renderSquare( 7 )}
					{this.renderSquare( 8 )}
					{this.renderSquare( 9 )}
					{this.renderSquare( 10 )}
					{this.renderSquare( 11 )}
				</div>
				<div className="board-row">
					{this.renderSquare( 12 )}
					{this.renderSquare( 13 )}
					{this.renderSquare( 14 )}
					{this.renderSquare( 15 )}
					{this.renderSquare( 16 )}
					{this.renderSquare( 17 )}
				</div>
				<div className="board-row">
					{this.renderSquare( 18 )}
					{this.renderSquare( 19 )}
					{this.renderSquare( 20 )}
					{this.renderSquare( 21 )}
					{this.renderSquare( 22 )}
					{this.renderSquare( 23 )}
				</div>
				<div className="board-row">
					{this.renderSquare( 24 )}
					{this.renderSquare( 25 )}
					{this.renderSquare( 26 )}
					{this.renderSquare( 27 )}
					{this.renderSquare( 28 )}
					{this.renderSquare( 29 )}
				</div>
			</div>
		);
	}
}

class Game extends React.Component {
	render() {
		return (
			<div className="game">
				<div className="game-board">
					<Board />
				</div>
				<div className="game-info">
					<div>{/* status */}</div>
					<ol>{/* TODO */}</ol>
				</div>
			</div>
		);
	}
}

ReactDOM.render(
	<Game />,
	document.getElementById( 'root' )
);

function calculateWinner( squares ) {
	console.log( 44, squares );
	const lines = [
		[ 0, 1, 2 ],
		[ 3, 4, 5 ],
		[ 6, 7, 8 ],
		[ 0, 3, 6 ],
		[ 1, 4, 7 ],
		[ 2, 5, 8 ],
		[ 0, 4, 8 ],
		[ 2, 4, 6 ],
	];
	for ( let i = 0; i < lines.length; i++ ) {
		const [a, b, c] = lines[ i ];
		console.log( 55, a, b, c );
		console.log( 66, squares[ a ], squares[ b ], squares[ c ] );
		if ( squares[ a ] && squares[ a ] === squares[ b ] && squares[ a ] === squares[ c ] ) {
			console.log( 77 );
			return squares[ a ];
		}
	}
	console.log( 88 );
	return null;
}